<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="central/include :: header('自动工位选择')" />
</head>
<body class="white-bg">
<div id="app" class="wrapper wrapper-content animated fadeInRight ibox-content">
    <el-form :model="operationStationForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="自动工位" prop="id">
            <el-select v-model="operationStationForm.id" placeholder="请选择自动制孔工位">
                <el-option v-for="(item,index) in autoOperationStationList" :key="index"
                           :value="item.value"
                           :label="item.label"
                           :disable="item.disable" :title="item|disableOfTitle"></el-option>
            </el-select>
        </el-form-item>

    </el-form>
</div>
<th:block th:include="central/include :: footer" />
<script th:inline="javascript">
    const prefix = ctx + "central/manualOperationStation";

    const operationStationProcessingStatusList = [[${@dict.getType('operation_station_processing_status')}]]

    $("#form-centralTaskCmdRun-add").validate({
        focusCleanup: true
    });
    const vm = new Vue({
        el:'#app',
        data(){
            return{
                operationStationForm:{
                    id:'',
                },rules:{
                    id:[
                        {required:true,message:'请选择自动制孔工位',trigger:'change'}
                    ]
                },autoOperationStationList:[],
            }
        },methods:{
            getAutoOperationStationList(){
                $.axiosRequest.get(prefix+"/getAutoOperationStationList")
                    .then(res=>{
                        console.log("res",res)
                        this.autoOperationStationList = res.data
                    })
            },submitHandler(){
                this.$refs['ruleForm'].validate(valid=>{
                    if(valid){
                        $.axiosRequest.post(prefix+"/handle",this.operationStationForm)
                            .then(res=>{
                                this.restoreToOriginalData()
                                $.modal.close();
                            })
                    }
                })
            },restoreToOriginalData(){
                Object.assign(this.$data,this.$options.data.call(this))
            }
        },filters:{
            disableOfTitle(value){
                const select = value

                if(select.disable && select.data){
                    const processingStatus = select.data.processingStatus
                    const operationStationProcessingStatus = operationStationProcessingStatusList.find(item=>item.dictValue == processingStatus)
                    return `自动操作工位：${select.label} 加工状态为：${operationStationProcessingStatus?'':operationStationProcessingStatus.dictLabel} 不能选择`
                }
                return ""
            }
        },created(){
            this.getAutoOperationStationList()
        }
    })

    function submitHandler() {
        vm.methods.submitHandler()
    }

</script>
</body>
</html>